<template>
  <div id="app">
    <el-header class="header">
      <nav>
        <div class="logo">APDDAP</div>
        <div class="nav-container">
          <!-- PC端导航菜单 -->
          <el-menu
              :default-active="activeIndex"
              mode="horizontal"
              @select="handleSelect"
              class="nav-menu"
              background-color="#ffffff"
              text-color="#004488"
              active-text-color="#004488"
              v-if="isDesktop"
          >
            <el-menu-item index="1" @click="navigateTo('/home')">Home</el-menu-item>
            <el-menu-item index="2" @click="navigateTo('/admin')">Admin</el-menu-item>
          </el-menu>
          <!-- 手机端下拉菜单 -->
          <el-dropdown class="nav-dropdown" v-else>
            <span class="el-dropdown-link">
              Navigation<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="navigateTo('/home')">Index</el-dropdown-item>
              <el-dropdown-item @click.native="navigateTo('/admin')">Admin</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </nav>
    </el-header>

    <div class="hero-image">
      <img :src="heroImage" alt="Hero Image">
    </div>

    <el-main class="main">
      <p class="title">Introduction</p>
      <p class="content">
        Animal parasitic diseases have not only economic impact, but also serious social and public health impact.
        Therefore, in the development and selection of drugs for parasitic diseases, it is necessary to conduct preliminary
        drug screening through the prediction of the association between parasitic diseases and drugs. In this paper,
        an online prediction platform for the association between animal parasitic diseases and drugs was developed, which
        supports 75 species of parasitic diseases in 9 categories and the prediction task of association with 122 compounds.
        The platform is based on a trained deep learning model and has high prediction accuracy. We hope that APDAP can become
        a good tool for promoting the research and development of anti-parasitic drugs and effective prevention and control
        of parasitic diseases, and contribute to human health and economic development.
      </p>
      <router-view></router-view>
      <el-divider/>
      <p class="subtitle">Citation</p>
      <p class="content">
        Please cite the following paper when using the server and data at this website:
      </p>
      <p class="content">
        Tao Xu, Wei Xue, Haoyuan Shi and Zhenyu Yue*, APDDAP: Animal Parasitic Diseases and Drugs Association Prediction Based on Relation Graph Convolutional Neural Networks, 2024, Submitted.
      </p>
      <el-divider/>
      <p class="subtitle">Contact</p>
      <p class="content">
        If you have any problem for our website, feel free to contact us via email:  <a
          href="mailto:taoxu@stu.ahau.edu.cn">taoxu@stu.ahau.edu.cn</a>
      </p>
    </el-main>
    <el-footer class="footer">
      <p>Copyright©Anhui Provincial Engineering Laboratory for Beidou Precision Agriculture Information.Anhui Agricultural University.</p>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      heroImage: require('@/assets/img.png'),
      isDesktop: window.innerWidth > 600
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    navigateTo(route) {
      if (this.$route.path !== route) {
        this.$router.push(route);
      }
    },
    updateScreenWidth() {
      this.isDesktop = window.innerWidth > 600;
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateScreenWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateScreenWidth);
  },
  watch: {
    $route(to, from) {
      this.activeIndex = to.path === '/home' ? '1' : to.path === '/admin' ? '2' : '';
    }
  }
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #004488;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  position: fixed;
  top: 0;
  z-index: 1000;
}

nav {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #004488;
}

.nav-container {
  display: flex;
  align-items: center;
}

.nav-menu {
  background-color: #ffffff !important;
  border: none;
  display: flex;
  align-items: center;
}

.el-menu-item {
  font-weight: normal;
  color: #004488 !important;
  margin: 0 15px;
  cursor: pointer;
  background-color: transparent !important;
  transition: color 0.3s ease, transform 0.3s ease;
  font-size: 18px; /* 增大字体大小 */
  &:hover {
    color: #004488 !important;
    transform: translateY(-2px);
  }
  &.is-active {
    font-weight: bold;
    color: #004488 !important;
  }
}

.el-menu--horizontal .el-menu-item::after {
  background-color: #004488 !important;
}

.nav-dropdown {
  display: none;
}

.main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 20px; /* Reduced margin */
}

.hero-image {
  width: 100%;
  max-width: 1200px;
  margin-top: 80px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center; // Center the image horizontally
  align-items: center;     // Center the image vertically
  img {
    width: 100%;
    height: 60%;
    object-fit: cover;
    border-radius: 4px;
  }
}

.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  color: #004488;
  padding: 10px 0;
  p {
    margin: 0;
  }
}

.title {
  text-align: left;
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  margin-top: 20px; /* Adjust margin */
}

.subtitle {
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

.content {
  text-align: justify;
  text-indent: 2em;
  font-size: 18px;
  line-height: 22px;
  color: black;
}

@media (max-width: 600px) {
  .nav-menu {
    display: none !important;
  }
  .nav-dropdown {
    display: block !important;
  }
  .header {
    font-size: 1.2em;
    padding: 15px;
  }
  .main {
    padding: 10px;
    margin-top: 20px; /* Adjust margin */
  }
  .hero-image {
    margin-top: 100px;
    img {
      width: 100%;
      height:100%;
      object-fit: cover;
    }
  }
  .title {
    font-size: 24px;
    line-height: 28px;
    margin-top: 20px; /* Adjust margin */
  }
  .subtitle {
    font-size: 20px;
    line-height: 24px;
  }
  .content {
    font-size: 16px;
    line-height: 20px;
  }
  .el-menu-item {
    font-size: 16px; /* 在移动端减少字体大小 */
  }
}
</style>
